<script setup>
import { ref } from 'vue'
import { HeartFilled } from '@ant-design/icons-vue';

const visible = ref(true)
const actived = ref(1)
function toggleVisible(value) {
  visible.value = !visible.value
}
const datas = [
  {
    address: '广东省深圳市福田区中康路华茂苑东南角(近上梅林地铁站,莲花北地铁站)梅丰社区创意公园',
    areaName: "福田区",
    code: "B01107901",
    communityName: "梅丰社区",
    createTime: 1652399407000,
    distance: 29924.02500494685,
    id: 53298,
    idCommunity1: 37369,
    latitude: "22.563307",
    longitude: "114.058945",
    name: "创意小公园",
    phone: "",
    serverAllday: 0,
    serverNight: 1,
    serverPeople: "辖区有核酸检测需求的人员",
    serverPeopleInt: 1,
    serverTime: "16:00-22:00",
    status: 1,
    streetName: "梅林街道",
    updateTime: 1652838908000,
  },
  {
    address: '广东省深圳市福田区中康路华茂苑东南角(近上梅林地铁站,莲花北地铁站)梅丰社区创意公园',
    areaName: "福田区",
    code: "B01107901",
    communityName: "梅丰社区",
    createTime: 1652399407000,
    distance: 29924.02500494685,
    id: 53298,
    idCommunity1: 37369,
    latitude: "22.563307",
    longitude: "114.058945",
    name: "创意小公园",
    phone: "",
    serverAllday: 0,
    serverNight: 1,
    serverPeople: "辖区有核酸检测需求的人员",
    serverPeopleInt: 1,
    serverTime: "16:00-22:00",
    status: 2,
    streetName: "梅林街道",
    updateTime: 1652838908000,
  },
  {
    address: '广东省深圳市福田区中康路华茂苑东南角(近上梅林地铁站,莲花北地铁站)梅丰社区创意公园',
    areaName: "福田区",
    code: "B01107901",
    communityName: "梅丰社区",
    createTime: 1652399407000,
    distance: 29924.02500494685,
    id: 53298,
    idCommunity1: 37369,
    latitude: "22.563307",
    longitude: "114.058945",
    name: "创意小公园",
    phone: "",
    serverAllday: 0,
    serverNight: 1,
    serverPeople: "辖区有核酸检测需求的人员",
    serverPeopleInt: 1,
    serverTime: "16:00-22:00",
    status: 3,
    streetName: "梅林街道",
    updateTime: 1652838908000,
  },
  {
    address: '广东省深圳市福田区中康路华茂苑东南角(近上梅林地铁站,莲花北地铁站)梅丰社区创意公园',
    areaName: "福田区",
    code: "B01107901",
    communityName: "梅丰社区",
    createTime: 1652399407000,
    distance: 29924.02500494685,
    id: 53298,
    idCommunity1: 37369,
    latitude: "22.563307",
    longitude: "114.058945",
    name: "创意小公园",
    phone: "",
    serverAllday: 0,
    serverNight: 1,
    serverPeople: "辖区有核酸检测需求的人员",
    serverPeopleInt: 1,
    serverTime: "16:00-22:00",
    status: 4,
    streetName: "梅林街道",
    updateTime: 1652838908000,
  },
  {
    address: '广东省深圳市福田区中康路华茂苑东南角(近上梅林地铁站,莲花北地铁站)梅丰社区创意公园',
    areaName: "福田区",
    code: "B01107901",
    communityName: "梅丰社区",
    createTime: 1652399407000,
    distance: 29924.02500494685,
    id: 53298,
    idCommunity1: 37369,
    latitude: "22.563307",
    longitude: "114.058945",
    name: "创意小公园",
    phone: "",
    serverAllday: 0,
    serverNight: 1,
    serverPeople: "辖区有核酸检测需求的人员",
    serverPeopleInt: 1,
    serverTime: "16:00-22:00",
    status: 1,
    streetName: "梅林街道",
    updateTime: 1652838908000,
  },
  {
    address: '广东省深圳市福田区中康路华茂苑东南角(近上梅林地铁站,莲花北地铁站)梅丰社区创意公园',
    areaName: "福田区",
    code: "B01107901",
    communityName: "梅丰社区",
    createTime: 1652399407000,
    distance: 29924.02500494685,
    id: 53298,
    idCommunity1: 37369,
    latitude: "22.563307",
    longitude: "114.058945",
    name: "创意小公园",
    phone: "",
    serverAllday: 0,
    serverNight: 1,
    serverPeople: "辖区有核酸检测需求的人员",
    serverPeopleInt: 1,
    serverTime: "16:00-22:00",
    status: 2,
    streetName: "梅林街道",
    updateTime: 1652838908000,
  },
]
const statusClassMap = {
  1: 'rest',
  2: 'smooth',
  3: 'work',
  4: 'busy'
}

const statusMap = {
  1: '休息',
  2: '畅通',
  3: '忙碌',
  4: '繁忙'
}

</script>

<template>
  <div class="menu" :class='{ hide: !visible }'>
    <div class="toggle-btn" @click="toggleVisible(false)">
      <span class="anticon" :class='{ "anticon-hide": !visible }'>{{ visible ? '<' : '>' }}</span>
    </div>
    <div class="menu-nav">
      <div class="menu-nav-item" :class='{ actived: actived === 1 }'>附近核酸检测点</div>
      <div class="menu-nav-item" :class='{ actived: actived === 2 }'>我的订阅</div>
    </div>

    <div class="menu-list">
      <div class="menu-item" :class="[statusClassMap[item.status]]" :key="index" v-for="(item, index) in datas">
        <heart-filled class="bell-icon actived" />
        <div class="menu-item-desc">
          <div class="menu-item-name">{{ `[ ${statusMap[item.status]} ]` }}&nbsp;&nbsp;{{ item.name }}</div>
          <div class="menu-item-subname">
            <div class="menu-item-subname-lable">服务时间:</div>
            <div class="menu-item-subname-desc">{{ item.serverTime }}</div>
          </div>
          <div class="menu-item-subname">
            <div class="menu-item-subname-lable">服务人群:</div>
            <div class="menu-item-subname-desc">{{ item.serverPeople }}</div>
          </div>
        </div>
        <div class="doc-dot doc-dot1" :class="[statusClassMap[item.status]]"></div>
        <div class="doc-dot doc-dot2" :class="[statusClassMap[item.status]]"></div>
        <div class="doc-dot doc-dot3" :class="[statusClassMap[item.status]]"></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.menu {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  text-align: left;
  width: 666px;
  height: 100%;
  // background-color: #f1f1f1;
  background-color: #fff;
  z-index: 1;
  box-shadow: 2px 0 10px 8px rgb(61 76 102 / 10%);
  transition: .5s;

  .menu-nav {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #C0C0C0;

    .menu-nav-item {
      display: block;
      flex: 1;
      margin: 0;
      padding: 10px;
      text-align: center;
      font-size: 20px;
      line-height: 40px;
      color: #666;
      cursor: pointer;
      &.actived {
        color: #222;
        font-weight: 700;
        border-bottom: 4px solid #126aff;
      }
    }
  }

  .title {
    margin-bottom: 0;
    font-size: 16px;
    color: #666;
    padding: 20px 0 0 20px;
  }

  .menu-list {
    padding: 20px 20px 60px;
    width: 100%;
    height: 100%;
    overflow-y: auto;

    &::-webkit-scrollbar {

      display: none;
      /* Chrome Safari */
    }

    .menu-item {
      width: 100%;
      background: #fff;
      border-radius: 12px;
      margin-top: 10px;
      padding: 8px 17px;
      height: 160px;
      position: relative;
      color: #fff;
      overflow: hidden;

      .bell-icon {
        z-index: 99;
        position: absolute;
        font-size: 20px;
        width: 30px;
        height: 30px;
        background: transparent;
        color: #fff;
        cursor: pointer;

        &.actived {
          color: #126aff;
        }
      }

      .menu-item-desc {
        z-index: 99;
        position: relative;

        .menu-item-name {
          font-size: 20px;
          position: relative;
          padding-bottom: 10px;
          z-index: 99;

          &::after {
            content: "";
            position: absolute;
            width: calc(50% + 10px);
            height: 2px;
            background-color: currentColor;
            left: 0;
            bottom: 0;
          }
        }

        .menu-item-subname {
          display: flex;
          align-items: center;
          margin-top: 10px;
          z-index: 99;

          .menu-item-subname-desc {
            margin-left: 10px;
          }
        }
      }

      &:hover {
        box-shadow: 0 3px 12px rgb(81 88 99 / 35%);

        .doc-dot1 {
          transform: translateX(-50px) translatey(-180px);
          filter: hue-rotate(-30deg) brightness(80%);
        }

        .doc-dot2 {
          transform: translateX(150px) translatey(0);
          filter: brightness(120%);
        }

        .doc-dot3 {
          filter: brightness(80%);
          transform: translateX(-150px) translatey(120px);
        }
      }

      .doc-dot {
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        -webkit-transition: all .6s cubic-bezier(.08, .82, .17, 1);
        transition: all .6s cubic-bezier(.08, .82, .17, 1);
        opacity: .3;
      }

      .doc-dot1 {
        width: 200px;
        height: 200px;
        left: 0;
        top: auto;
        right: auto;
        bottom: -150px;
        -webkit-filter: hue-rotate(30deg) brightness(160%);
        filter: hue-rotate(30deg) brightness(160%);
      }

      .doc-dot2 {
        left: -40px;
        top: auto;
        right: auto;
        bottom: -10px;
        width: 150px;
        height: 150px;
        -webkit-filter: brightness(80%);
        filter: brightness(80%);
      }

      .doc-dot3 {
        top: -60px;
        right: -60px;
        opacity: .6;
        width: 120px;
        height: 120px;
        -webkit-filter: brightness(120%);
        filter: brightness(120%);
      }
    }

    .rest {
      background-image: linear-gradient(45deg, #9aadb9, #354855) !important;
      color: #fff !important;
    }

    .smooth {
      background-image: linear-gradient(45deg, #90e630, #39d266) !important;
      color: #fff !important;
    }

    .work {
      background-image: linear-gradient(45deg, #f5fe00, #f60) !important;
      color: #fff !important;
    }

    .busy {
      background-image: linear-gradient(45deg, #ff9700, #ed1c24) !important;
      color: #fff !important;
    }
  }
}

.hide {
  transform: translate(-100%);
}

.toggle-btn {
  cursor: pointer;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  right: -80px;
  width: 80px;
  height: 80px;
  background-color: #fff;
  border-radius: 0 100px 100px 0;
  box-shadow: 2px 0 10px 8px rgb(61 76 102 / 10%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.anticon {
  background: #f5f5f5;
  color: #666;
  position: absolute;
  right: 8px;
  top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 28px;
}

.anticon:hover {
  background: #ebebeb;
}

.anticon-hide {
  background: #126aff;
  color: #fff;
}

.anticon-hide:hover {
  background: #126aff;
}
</style>
